<template>
    <ContentWrap>
        <div class="flex justify-between">
            <div class="">
                <ElInput v-model="state.keywords" style="width: 266px;height: 32px;margin-right: 10px;" placeholder="反馈意见内容"
                    :prefix-icon="Search" />
                <ElButton type="primary" :icon="Search" @click="onSearch">
                    {{ t('common.query') }}
                </ElButton>
                <ElButton :icon="Refresh" @click="onReset">
                    {{ t('common.reset') }}
                </ElButton>
            </div>
        </div>
        <div class="" style="margin-top: 25px;">
            <Table v-model:pageSize="pageSize" v-model:currentPage="currentPage" :columns="allSchemas.tableColumns"
                :data="dataList" :loading="loading" :pagination="{ total: total }" @register="tableRegister"
                :headerCellStyle="headerCellStyle" :rowStyle="rowStyle" :preview="['companyLogoUrl']" />
        </div>
    </ContentWrap>
    <Dialog v-model="dialogVisible1" title="详情" width="850px">
        <div class="flex " style="margin:16px 0px">
            <p class="opin_title fontw700">用户账号：</p>
            <p>{{ state.ruleForm.userName }}</p>
        </div>
        <div class="flex" style="margin:16px 0px">
            <p class="opin_title fontw700">手机号：</p>
            <p>{{ state.ruleForm.phonenumber }}</p>
        </div>
        <div class="flex" style="margin:16px 0px">
            <p class="opin_title fontw700">反馈内容：</p>
            <p>{{ state.ruleForm.feedback }}</p>
        </div>
        <div class="" style="margin:16px 0px">
            <p class="opin_title fontw700">图片：</p>
            <div class="flex flex-wrap">
                <div v-for="(item, index) in state.ruleForm.feedbackFiles" :key="index">
                    <el-image style="width: 100px; height: 100px;margin-right:16px" :src="item.url" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="[item.url]" :initial-index="0" fit="cover" />
                </div>

            </div>
        </div>
    </Dialog>
</template>
    
<script setup lang="tsx">
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { Search, Plus, Refresh, Pointer, Star } from '@element-plus/icons-vue'
import { Dialog } from '@/components/Dialog'
import { useEmitt } from '@/hooks/event/useEmitt'
import { ElButton, ElInput, ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, unref } from "vue"
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { getTenantListApi, addTenantApi, editTenantApi, deteleTenantApi } from "@/api/business/index"
import { getfeedbackListApi } from "@/api/feedback/index"
import { getTypeListApi } from "@/api/common/index"
import UpLoadImage from "@/views/Components/UpLoadImage.vue"
import UpLoadImages from "@/views/Components/UpLoadImages.vue"
import { useAppStoreWithOut } from '@/store/modules/app'
import type { FormInstance, FormRules } from 'element-plus'
import { useStorage } from '@/hooks/web/useStorage'
const { getStorage } = useStorage()
const appStore = useAppStoreWithOut()
const userInfo = getStorage(appStore.getUserInfo)
const { t } = useI18n()
const dialogVisible1 = ref(false)
const code_text = ref("获取验证码");
const code_loading = ref(false);
const code_timer = ref<number | null | undefined>();
const loadingAdd = ref(false)

const state = reactive({
    options1: [] as any,
    options2: [] as any,
    options3: [] as any,
    dialogVisible1title: "",
    ruleForm: {} as any,
    keywords: "",
    react: false,
})

// 表格基本信息
const crudSchemas = reactive<CrudSchema[]>([
    {
        field: 'feedback',
        label: "内容",

    },
    {
        field: 'userName',
        label: "用户账号",
    },
    {
        field: 'phonenumber',
        label: "手机号",
    },
    {
        field: 'action',
        width: '260px',
        label: t('tableDemo.action'),
        search: {
            hidden: true
        },
        form: {
            hidden: true
        },
        detail: {
            hidden: true
        },
        table: {
            slots: {
                default: (data: any) => {
                    return (
                        <>
                            <ElButton link type="primary" onClick={() => action(data[0].row)}>
                                详情
                            </ElButton>
                        </>
                    )
                }
            }
        }
    }
])

const { tableRegister, tableState, tableMethods } = useTable({
    fetchDataApi: async () => {
        const { currentPage, pageSize } = tableState
        const res: any = await getfeedbackListApi({
            pageNum: state.react ? 1 : unref(currentPage),
            pageSize: unref(pageSize),
            feedback: state.keywords,
            orderByColumn:'createTime',
            isAsc:"desc"
            // contactPhone: state.keywords
        })
        console.log(res);
        state.react = false
        return {
            list: res.rows,
            total: res.total
        }
    }
})
// 表格头部信息
const headerCellStyle: any = {
    "background": "#F2F6FC",
    "height": "48px"
}
// 
const rowStyle: any = {
    "height": "48px"
}
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, getElTableExpose, delList } = tableMethods
getList()
useEmitt({
    name: 'getList',
    callback: (type: string) => {
        if (type === 'add') {
            currentPage.value = 1
        }
        getList()
    }
})
const { allSchemas } = useCrudSchemas(crudSchemas)
const action = (row: any) => {
    console.log("编辑", row);
    state.ruleForm = row
    dialogVisible1.value = true
}
// 查询
const onSearch = () => {
    console.log("查询");
    state.react = true
    getList()
}
// 重置
const onReset = () => {
    console.log("重置");
    state.keywords = ""
    state.react = true
    getList()
}

const resetForm = (formEl: FormInstance | undefined) => {
    dialogVisible1.value = false
    if (!formEl) return
    formEl.resetFields()
}


</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    text-align: center;
}

.imagelogo {
    width: 100px;
    height: 100px;
}

.el-image {
    width: 90px;
    height: 90px;
}
</style>
<style lang="less" scoped>
.avatar-uploader .avatar {
    width: 148px;
    height: 148px;
    display: block;
}

.business_content_main {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}
</style>